<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>优菜商城</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="author" content="@binggan" />
		<link rel="stylesheet" href="css/ydui.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_463779_pkv3jpw5yz1fko6r.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/flexible.js"></script>
	</head>

	<body>
		<section class="g-flexview">
			<header class="m-navbar index-navbar border-bot">
				<a href="#" class="navbar-item back">
					<i class="back-ico"></i>
				</a>
				<div class="navbar-center">
					<span class="navbar-title">我的订单</span>
				</div>
			</header>
			<div class="g-scrollview">
				<div class="tab-tit-box border-bot white-bg">
					<ul class="tab-tits clearfix">
						<li class='item active'>全部</li>
						<li class='item'>待支付</li>
						<li class='item'>配货中</li>
						<li class='item'>待收货</li>
						<li class='item'>已完成</li>
					</ul>
				</div>
				<div class="order-lists-container">
					<!--<div class="order-lists-item white-bg">
						<div class="order-item-top border-bot">
							<p class="time">2016-08-22 08:13</p>
							<span class="status">待支付</span>
						</div>
						<a href="order-detail.html" class="order-item-info border-bot">
							<div class="item-right">
								<div class="thumbnail">
									<img src="images/item_thumbnail.png">
								</div>
								<div class="iten-right-info">
									<p class="item-right-name text-overfow">进口红提(盒装1150g)进口红提(盒装1150g)进口红提(盒装1150g)进口红提(盒装1150g)进口红提(盒装1150g)进口红提(盒装1150g)进口红提(盒装1150g)</p>
									<div class="iten-right-info-bot">
										<p class="price-box">¥<span class="price unit-price">558.36</span></p>
										<p>X<span class="mernum">1</span></p>
									</div>
								</div>
							</div>
						</a>
						<div class="order-item-bot border-bot">
							<p class="total-info border-bot">共6件商品,合计<span class="price">¥600.00</span></p>
							<div class="oreder-button-group">
								<button type="button" class="button-calcel cancel-order">取消订单</button>
								<button type="button" class="button-yellow button-confirm pay-order">立即支付</button>
							</div>
						</div>
					</div>-->

					<div class="order-lists-item white-bg">
						<div class="order-item-top border-bot">
							<p class="time">2016-08-22 08:13</p>
							<span class="status">待支付</span>
						</div>
						<a href="order-detail.html" class="order-item-info border-bot">
							<!--多商品只显示图片-->
							<div class="swiper-container adaptive-w">
								<div class="swiper-wrapper">
									<div class="swiper-slide">
										<img src="images/item1.png" />
										<p class="mernum">数量 2</p>
									</div>
									<div class="swiper-slide"><img src="images/item2.png" />
										<p class="mernum">数量 12</p>
									</div>
									<div class="swiper-slide"><img src="images/item1.png" />
										<p class="mernum">数量 20</p>
									</div>
									<div class="swiper-slide"><img src="images/item2.png" />
										<p class="mernum">数量 1</p>
									</div>
									<div class="swiper-slide"><img src="images/item3.png" />
										<p class="mernum">数量 2</p>
									</div>
									<div class="swiper-slide"><img src="images/item1.png" />
										<p class="mernum">数量 8</p>
									</div>
									<div class="swiper-slide"><img src="images/item2.png" />
										<p class="mernum">数量 5</p>
									</div>
									<div class="swiper-slide"><img src="images/item3.png" />
										<p class="mernum">数量 6</p>
									</div>
								</div>
							</div>
						</a>
						<div class="order-item-bot border-bot">
							<p class="total-info border-bot">共6件商品,合计<span class="price">¥600.00</span></p>
							<div class="oreder-button-group">
								<a href="refund.html" class="button-yellow button-confirm refund-btn">申请退款</a>
							</div>
						</div>
					</div>

					<div class="order-lists-item white-bg">
						<div class="order-item-top border-bot">
							<p class="time">2016-08-22 08:13</p>
							<span class="status">待支付</span>
						</div>
						<a href="order-detail.html" class="order-item-info border-bot">
							<!--多商品只显示图片-->
							<div class="swiper-container adaptive-w">
								<div class="swiper-wrapper">
									<div class="swiper-slide">
										<img src="images/item1.png" />
										<p class="mernum">数量 2</p>
									</div>
									<div class="swiper-slide"><img src="images/item2.png" />
										<p class="mernum">数量 12</p>
									</div>
									<div class="swiper-slide"><img src="images/item1.png" />
										<p class="mernum">数量 20</p>
									</div>
								</div>
							</div>
						</a>
						<div class="order-item-bot border-bot">
							<p class="total-info border-bot">共6件商品,合计<span class="price">¥600.00</span></p>
							<div class="oreder-button-group">
								<button type="button" class="button-calcel del-order">删除订单</button>
								<button type="button" class="button-yellow button-confirm rebuy-btn">再次购买</button>
							</div>
						</div>
					</div>

				</div>
			</div>
		</section>

		<!--模板块-->
		<script type="text/html" id="tpl_fir">
			{{each data as item }}
			<div class="order-lists-item white-bg">
				<div class="order-item-top border-bot">
					<p class="time">2016-08-22 08:13</p>
					<span class="status">待支付</span>
				</div>
				<a href="order-detail.html" class="order-item-info border-bot">
					<div class="item-right">
						<div class="thumbnail">
							<img src="{{item.img}}">
						</div>
						<div class="iten-right-info">
							<p class="item-right-name text-overfow">{{item.title}}</p>
							<div class="iten-right-info-bot">
								<p class="price-box">¥<span class="price unit-price">{{item.marketprice}}</span></p>
								<p>X<span class="mernum">1</span></p>
							</div>
						</div>
					</div>
				</a>
				<div class="order-item-bot border-bot">
					<p class="total-info border-bot">共6件商品,合计<span class="price">¥{{item.productprice}}</span></p>
					<div class="oreder-button-group">
						<button type="button" class="button-calcel cancel-order">取消订单</button>
						<button type="button" class="button-yellow button-confirm pay-order">立即支付</button>
					</div>
				</div>
			</div>
			<div class="order-lists-item white-bg">
				<div class="order-item-top border-bot">
					<p class="time">2016-08-22 08:13</p>
					<span class="status">待支付</span>
				</div>
				<a href="order-detail.html" class="order-item-info border-bot">
					<!--多商品只显示图片-->
					<div class="swiper-container adaptive-w">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img src="images/item1.png" />
								<p class="mernum">数量 2</p>
							</div>
							<div class="swiper-slide"><img src="{{item.img}}" />
								<p class="mernum">数量 12</p>
							</div>
							<div class="swiper-slide"><img src="images/item1.png" />
								<p class="mernum">数量 20</p>
							</div>
							<div class="swiper-slide"><img src="images/item2.png" />
								<p class="mernum">数量 1</p>
							</div>
							<div class="swiper-slide"><img src="images/item3.png" />
								<p class="mernum">数量 2</p>
							</div>
							<div class="swiper-slide"><img src="images/item1.png" />
								<p class="mernum">数量 8</p>
							</div>
							<div class="swiper-slide"><img src="images/item2.png" />
								<p class="mernum">数量 5</p>
							</div>
							<div class="swiper-slide"><img src="images/item3.png" />
								<p class="mernum">数量 6</p>
							</div>
						</div>
					</div>
				</a>
				<div class="order-item-bot border-bot">
					<p class="total-info border-bot">共6件商品,合计<span class="price">¥{{item.productprice}}</span></p>
					<div class="oreder-button-group">
						<a href="refund.html" class="button-yellow button-confirm refund-btn">申请退款</a>
					</div>
				</div>
			</div>
			{{/each}}
			<script>
			var swiper = new Swiper('.swiper-container', {
				slidesPerView: 4.2,
				spaceBetween: '1.2%',
				freeMode: true
			});
		</script>
			
		</script>
		<!--模板块end-->

		<script src="js/jquery.min.js"></script>
		<script src="js/ydui.js"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/arttemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/order_operate.js" type="text/javascript" charset="utf-8"></script>
		<!--<script>
			var swiper = new Swiper('.swiper-container', {
				slidesPerView: 4.2,
				spaceBetween: '1.2%',
				freeMode: true
			});
		</script>-->
	</body>

</html>